<script>
import "./assets/css/base.css";
import "./assets/icon/iconfont.css";
import SideLeftMe from "@/components/SideLeftMe";
import BottomNavigationBar from "@/components/BottomNavigationBar";
import { useIndex } from "./stores/index.js";
import { computed, onBeforeMount, onBeforeUpdate, ref } from "vue";
import { useRoute } from "vue-router";
export default {
  setup() {
    const indexStore = useIndex();

    // 隐藏我的页事件
    let changeSideLeftMeShow = () => {
      console.log("隐藏");
      indexStore.changeSideLeftMeShow(false);
    };

    // 用户初始化
    let userinfoInit = () => {
      // console.log("userinfoInit");
    };

    // 判断当前路由是否需要显示底部
    let BottomNavigationBarShow = ref(false);
    let BottomNavigationBarInit = () => {
      // 拿到route对象
      let route = useRoute();
      // console.log(route, route.name);
      // 显示底部导航栏的路由数组
      let BottomNavigationBarShowNameList = [
        "BookCity",
        "BookCabinet",
        "BookCase",
        "BookStore",
      ];

      BottomNavigationBarShow.value = BottomNavigationBarShowNameList.some(
        (name) => name == route.name
      );
      // console.log(
      //   "判断当前路由是否需要显示底部",
      //   BottomNavigationBarShow.value
      // );
    };

    // 检测是否为首次打开
    let checkNewUser = () => {
      let token = localStorage.getItem("foxReadingToken");
      if (!token) {
        userinfoInit();
      }
    };

    // 挂载前
    onBeforeMount(() => {
      checkNewUser();
      BottomNavigationBarInit();
    });

    // 更新前
    onBeforeUpdate(() => {
      BottomNavigationBarInit();
    });

    return {
      SideLeftMeShow: computed(() => indexStore.SideLeftMeShow),
      changeSideLeftMeShow,
      BottomNavigationBarShow,
    };
  },

  components: {
    SideLeftMe,
    BottomNavigationBar,
  },
};
</script>


<template>
  <!-- 路由视图 -->
  <main :class="SideLeftMeShow ? 'show' : 'hide'">
    <router-view v-if="!$route.meta.keep" />
    <keep-alive><router-view v-if="$route.meta.keep" /> </keep-alive>
  </main>

  <!-- 左侧个人中心 -->
  <SideLeftMe></SideLeftMe>

  <!-- 底部导航栏 -->
  <BottomNavigationBar v-if="BottomNavigationBarShow"></BottomNavigationBar>
</template>

<style lang="scss">
#app {
  min-height: 100%;
  width: 100%;
  overflow: hidden;
  // min-width: ;
  main {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 100%;
    overflow-y: scroll;
    overflow-x: hidden;
    transition: all 0.3s ease;
    min-width: 320px;
    max-width: 750px;
    margin: auto;
    z-index: 0;
    &.show {
      left: calc(100% - 80px);
    }
    &.hide {
      left: 0;
    }
  }
}
</style>
